// 1.引入路由方法
import {createRouter,createWebHashHistory} from 'vue-router'
import { NIcon } from 'naive-ui';
import { h } from 'vue';
import {
  CartOutline,
  GiftOutline,
  AppsOutline,
  ConstructOutline
}from "@vicons/ionicons5"

// 2.引入页面组件
import CartPage from '../views/CartPage.vue'
import ProductPage from '../views/product/index.vue'
import LoginPage from '../views/Login/LoginPage.vue'
import MainLayout from '../layout/index.vue'
import ParamTest from '../views/ParamTest/index.vue'
import Page01 from '../views/ParamTest/Page1.vue'
import Page02 from '../views/ParamTest/Page2.vue'
import Page03 from '../views/ParamTest/Page3.vue'
import NotFound from '../views/NotFound.vue'
import PiniaTest from '../views/PiniaTest/index.vue'
import CompA from '../views/PiniaTest/CompA.vue'
import CompB from '../views/PiniaTest/CompB.vue'
import ProductEdit from '../views/product/Edit.vue'
import Setting from '../views/Setting.vue'
import Manager from '../views/Manager/index.vue'
import Role from '../views/Manager/Role.vue'
import UserList from '../views/Manager/UserList.vue'
import NoPermission from '../views/NoPermission.vue'
import DashBoard from '../views/DashBoard/index.vue'
import { useAccount } from '../store/account';
import RichText from '../views/RichText.vue';
// const isLogin = true //模拟登录状态

function renderIcon(icon){
  return ()=>h(NIcon,null,{default:()=>h(icon)})
}

// 3.设置路由-组件的映射关系
export const routes = [
  {path:'/login',component:LoginPage},
  {path:'/',
    component:MainLayout,
    children:[ // 第二层
      {
        path:'/cart',
        component:CartPage,
        label:'购物车管理',
        icon:renderIcon(CartOutline),
      },
      {
        path:'/product',
        component:ProductPage,
        label:'商品管理',
        icon:renderIcon(GiftOutline)
      },
      {
        path:'/product/edit',
        component:ProductEdit,
        label:'编辑',
        icon:renderIcon(AppsOutline),
        show:false
      },
      {
        path:'/setting',
        component:Setting,
        label:'设置',
        icon:renderIcon(AppsOutline),
      },
      {
        path:'/page',
        component:ParamTest,
        label:'动态路由测试',
        icon:renderIcon(AppsOutline),
        children:[
          {path:'/page/page1/:id',component:Page01,label:'页面1'},
          {path:'/page/page2/:num',component:Page02,label:'页面2'},
          {path:'/page/page3',component:Page03,label:'页面3'}
        ],
        
      },
      {
        path:'/pinia',
        component:PiniaTest,
        label:'状态机测试',
        icon:renderIcon(AppsOutline),
        children:[
          {path:'/pinia/pinia1/',component:CompA,label:'A组件'},
          {path:'/pinia/pinia2/',component:CompB,label:'B组件'},
        ]
      },
      {
        path:'/manager',
        component:Manager,
        label:'权限管理',
        icon:renderIcon(ConstructOutline),
        children:[
          {path:'/manager/role',component:Role,label:'角色管理'},
          {path:'/manager/userlist',component:UserList,label:'账号管理'},
        ]
      },
      {
        path:'/no/permission',
        component:NoPermission,
        label:'无权访问',
        icon:renderIcon(GiftOutline),
        show:false
      },
      {
        path:'/dashboard',
        component:DashBoard,
        label:'仪表盘',
        icon:renderIcon(ConstructOutline),
      },
      {
        path:'/rich/text',
        component:RichText,
        label:'富文本编辑',
        icon:renderIcon(ConstructOutline),
      },
    ],
  //   beforeEnter: (to, from, next) => { //路由独享守卫
  //     // ...
  //     console.log('路由独享守卫',to,from);
  //     if(isLogin){
  //       next()
  //     }else{
  //       next('/login')
  //     }
  //   }
  },
  { path: '/:pathMatch(.*)*',component: NotFound },

]

// 4. 生成路由对象
const router = createRouter({
  'history':createWebHashHistory(),  //路由模式
  'routes':routes   
})



// 全局前置守卫
router.beforeEach((to,from,next)=>{
  //to   到哪里去，相关信息
  //from 从哪里来，相关信息
  //next  方法调用后代表放行
  console.log('全局前置守卫',to,from);
  // 路由白名单
  const whiteList = ['/login','/no/permission']
  if(whiteList.includes(to.path)){
    next()
    return
  }
  //登录状态判断
  const account = useAccount()
  if(account.jwtToken){
    //访问权限判断: to.path 是否存在于 permission中
    let isPermit = account.permitData.permission.includes(to.path)
    isPermit ? next() : next('/no/permission')
  }else{
    next('/login')
  }

})
// 5. 导出路由对象
export default router